import { useRequest } from 'ahooks';
import {
  Table, Image, Tag, Switch, Button,
} from 'antd';
import {
  useCallback, useEffect, useMemo, useState,
} from 'react';
import { postProjectSearchApi } from '../../../api/pro';
import { WithDetailDrawer } from '../../../utils/hooks';
import WarePriceForm from './WarePriceForm';

const WarePrice = () => {
  const [pageInfo, setPageInfo] = useState({ page: 1, pageSize: 10 })
  const [filter, setFilter] = useState({ category: '', search: '' })
  const { data, loading } = useRequest(() => postProjectSearchApi(filter), { refreshDeps: [filter] })
  const { check, detailDrawer } = WithDetailDrawer()
  const columns = useMemo(() => [
    {
      title: '序号',
      width: 60,
      render: (_, record, index) => (index + 1) + (pageInfo.page - 1) * (pageInfo.pageSize),
    },
    {
      title: '名称',
      dataIndex: 'proname',
      render: (_) => (_),
      ellipsis: true,
    },
    {
      title: '图片',
      dataIndex: 'img1',
      render: (_) => <Image src={_} />,
    },
    {
      title: '描述',
      dataIndex: 'desc',
      render: (_) => (_),
      ellipsis: true,
    },
    {
      title: '分类',
      dataIndex: 'category',
      render: (_) => <Tag color="blue">{_}</Tag>,
    },
    {
      title: '品牌',
      dataIndex: 'brand',
      render: (_) => <Tag color="blue">{_}</Tag>,
    },
    {
      title: '原价/折扣',
      render: (_) => (`${_.originprice}/${_.discount}`),
    },
    {
      title: '售价',
      render: (_) => ((_.originprice * _.discount / 10).toFixed(2)),
    },
    {
      title: '推荐',
      dataIndex: 'isrecommend',
      render: (_, record) => <Switch checked={!!_} />,
    },
    {
      title: '操作',
      render: (_, record) => <Button type="link" onClick={() => check(record)}>查看</Button>,
    },
  ], [pageInfo])
  const handleUpdatePage = useCallback((e) => {
    setPageInfo({ page: e, pageSize: 10 })
  }, [])
  // useEffect(() => {
  //   getProjectSearch(filter)
  // }, [filter])
  return (
    <>
      <WarePriceForm filter={filter} setFilter={setFilter} />
      <Table
        loading={loading}
        rowKey="proid"
        dataSource={data}
        columns={columns}
        pagination={{
          onChange: handleUpdatePage,
        }}
      />
      {detailDrawer}
    </>
  )
}
export default WarePrice;
